<template>
	<div>
		<Form ref='newsForm' :model='newsData' :rules='newsRule' :label-width="50">
			<FormItem label='标题:' prop='name'>
				<Input v-model="newsData.name" placeholder="请输入标题" style="width: 600px;"></Input>
			</FormItem>
			<FormItem label='描述:' prop='description'>
				<Input v-model="newsData.description" placeholder="请输入描述" style="width: 600px;"></Input>
			</FormItem>
			<!--<FormItem label='分类:'>
				<Select placeholder="请选择类型" style="width: 600px" @on-change='selectType'>
					<Option v-for="(item,index) in listData" :value="item.name" :key='index'>{{item.name}}</Option>
				</Select>
			</FormItem>-->
			<upload-pic :fileType="fileType" @upSuccess="setPicUrl" :fatherPicUrl="newsData.pic">
				<p class="tip">会员头像</p>
			</upload-pic>
			<FormItem label='内容:' prop='content'>
				<editor id="editor_id" height="500px" width="700px" v-model='newsData.content' :content="newsData.content" :loadStyleMode="false" @on-content-change="onContentChange"></editor>
			</FormItem>
			<div class="button-box" style="margin-left: 370px;">
				<Button :loading="isKeep" type="primary" @click="keepNews('newsForm')">提交</Button>
			</div>
		</Form>
	</div>
</template>
<!-- 修改新闻页面 -->
<script>
	// 
	import uploadPic from "@/components/common/UploadPic.vue";
	export default {
		components:{
			uploadPic
		},
		data(){
			return {
				isKeep: false,
				newsId:'',
				newsData: {
					id:'',
					name: '',
					description: '',
					content: '',
					pic: '',
					categoryId: '', // 分类Id
					seqNo: '' //新闻排序
				},
				listData:[],
				// 验证规则
				newsRule: {
					name: [{
						required: true,
						message: "请输入标题"
					}],
					description: [{
						required: true,
						message: "请输入描述"
					}],
					content: [{
						required: true,
						message: "请输入内容"
					}]
				},
				fileType: {
					fileType: 1
				}
			}
		},
		created(){
			this.getData()
		},
		methods:{
			//  vue-kindeditor
			onContentChange(val) {
				this.newsData.content = val;
			},
			//  获取到新闻类型
			getData(){
				this.$http
				.post('/news_category/detail_list')
				.then((res)=>{
					//  图片预加载
//					let img = new Image();
//					img.onload = () => {};
//					console.log(img)
//					this.newsData.pic = img.src
					
					this.listData = res.data.news;
//					console.log(res)
				})
				.catch((err)=>{
					console.log(err)
					this.$Notice.error({
						title:'获取新闻类型失败!'
					})
				})
			},
			// 获取上传图片的地址
			setPicUrl(imgUrl) {
				this.newsData.pic = imgUrl;
			},
			//  修改
			keepNews(refName){
				console.log(this.newsData)
				this.$refs[refName].validate((valid)=>{
					if(valid){
						this.isKeep = true;
						this.$http.post('/news/edit',this.newsData)
						.then((res)=>{
							this.isKeep = false;
							this.$Message.success("新闻修改成功！");
							this.$router.push({
                                path:'/news_category/list'
                            })
						//	console.log(res)
						})
						.catch((err)=>{
							console.log(err);
							this.$Notice.error({
								title:'新闻修改失败!'
							})
						})
					}
				})
			}
		},
		mounted(){
			//  获取NewList.vue  编辑点击传过来的参数
			this.$nextTick(function(){
				//  获取新闻id
				var newsIdIdReg = /\d*$/;
				this.newsId = this.$route.path.match(newsIdIdReg)[0];
				localStorage.setItem('newsId',this.newsId);
				//  康养 慢性病 饮食 急救 组件 传过来的数据
				var obj = this.$route.query;
				this.newsData.categoryId = obj.categoryId;
				this.newsData.id = obj.id;
				this.newsData.name = obj.name;
				this.newsData.description = obj.description;
				this.newsData.content = obj.content;
				this.newsData.seqNo = obj.seqNo;
				this.newsData.pic = obj.pic;
		//		console.log(this.newsData)
//				if(localStorage.getItem('newsId') !== ''){
//					this.getData()
//				}
			})
		}
	}
</script>

<style class="less">
	.tip {
		font-size: 16px;
		margin-bottom: 16px;
		color: #0b9595;
	}
</style>